<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>player</title>
</head>
<body>
<div style="width: 500px;">
	<div id="player1"></div>
</div>
<style type="text/css">

.icon {
    display: inline-block;
    font: normal normal normal 14px/1 icon;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}


.icon-music:before {
  content: "\f001";
}

.icon-search:before {
  content: "\f002";
}

.icon-remove:before {
  content: "\f00d";
}

.icon-trash:before {
  content: "\f014";
}

.icon-repeat:before {
  content: "\f01e";
}

.icon-refresh:before {
  content: "\f021";
}

.icon-list-alt:before {
  content: "\f022";
}

.icon-step-backward:before {
  content: "\f048";
}

.icon-fast-backward:before {
  content: "\f049";
}

.icon-backward:before {
  content: "\f04a";
}



.icon-stop:before {
  content: "\f04d";
}

.icon-forward:before {
  content: "\f04e";
}

.icon-fast-forward:before {
  content: "\f050";
}

.icon-step-forward:before {
  content: "\f051";
}

.icon-chevron-left:before {
  content: "\f053";
}

.icon-chevron-right:before {
  content: "\f054";
}

.icon-remove-sign:before {
  content: "\f057";
}

.icon-ok-sign:before {
  content: "\f058";
}

.icon-arrow-left:before {
  content: "\f060";
}

.icon-arrow-right:before {
  content: "\f061";
}

.icon-share-alt:before {
  content: "\f064";
}

.icon-exclamation-sign:before {
  content: "\f06a";
}

.icon-random:before {
  content: "\f074";
}

.icon-retweet:before {
  content: "\f079";
}


.icon-long-arrow-left:before {
  content: "\f177";
}

.icon-long-arrow-right:before {
  content: "\f178";
}

.zplayer ::-webkit-scrollbar {
    width: 3px!important
}

.zplayer ::-webkit-scrollbar-track {
    border-radius: 10px!important;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3)!important
}

.zplayer ::-webkit-scrollbar-thumb {
    border-radius: 10px!important;
    background: rgba(0,0,0,.1)!important;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.5)!important
}

.zplayer ::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,.4)!important
}

.zplayer .zplayer-content {
    float: left;
    width: 100%;
    /* border-top: 1px solid #ededed; */
    /* border-bottom: 1px solid #ededed; */
    border: 1px solid #ededed;
    background: #fff;
}

.zplayer .ss-btn {
    position: fixed;
    left: 330px;
    float: right;
    width: 20px;
    height: 62px;
    background: #3da0fd none repeat scroll 0 0;
    cursor: pointer;
}

.zplayer .ss-btn i {
    margin-top: 1px;
    padding: 0 4px;
    color: #fff;
    font-size: 14px;
    line-height: 62px
}

.zplayer {
    float: right;
    color: #6e6e6e;
    font-size: 14px;
    line-height: 19px;
    cursor: pointer;
}

.zplayer .zplayer-list {
    clear: both;
    overflow: auto;
    margin: 0;
    padding: 0;
    width: 100%;
    border: 1px solid #dedede;
    border-top: none;
    background: #fff;
    transition: all .5s ease;
}

.zplayer .zplayer-list li {
    overflow: hidden;
    padding: 3px 20px;
    color: #878787;
    list-style-position: inside;
    list-style-type: decimal;
    text-overflow: ellipsis;
    font-size: 11px;
    line-height: 1.5;
    cursor: pointer
}

.zplayer .zplayer-list li:hover {
    color: #716e6e;
    font-weight: 700
}

.zplayer .zplayer-list li.playing {
    padding-left: 17px;
    border-left: 3px solid #3da0ff;
    color: #716e6e;
    font-weight: 700
}

.zplayer .display-none {
    display: none
}

.zplayer {
    z-index: 1024;
    width: 100%;
    font-family: Arial,Helvetica,sans-serif;
    transition: transform .5s ease;
    transform: translateX(0px);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.zplayer-fixed .zplayer{
	position: fixed;
    bottom: 0;
    left: 0;
    width: 330px;
}

.zplayer span {
    cursor: default!important
}

.zplayer .zplayer-pic {
    position: absolute;
    top: 0;
    left: 0;
    width: 62px;
    height: 62px
}

.zplayer .zplayer-pic img {
    width: 100%;
    height: 100%
}

.zplayer .zplayer-info {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 60px;
    padding: 4px 5px 0 10px;
    height: 60px
}

.zplayer .zplayer-info .zplayer-music {
    overflow: hidden;
    margin-bottom: 6px;
    text-overflow: ellipsis;
}

.zplayer .zplayer-info .zplayer-music .zplayer-title {
    font-size: 14px
}

.zplayer .zplayer-info .zplayer-music .zplayer-author {
    color: #666;
    font-size: 12px
}

.zplayer .zplayer-info .zplayer-controller {
    position: relative
}

.zplayer .zplayer-info .zplayer-controller .zplayer-bar-wrap .zplayer-bar {
    position: relative;
    width: 100%;
    height: 2px;
    background: #cdcdcd;
    cursor: pointer!important
}

.zplayer .zplayer-info .zplayer-controller .zplayer-bar-wrap .zplayer-bar .zplayer-loaded {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: #aaa;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.zplayer .zplayer-info .zplayer-controller .zplayer-bar-wrap .zplayer-bar .zplayer-played,.zplayer .zplayer-volume-played {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: #3da0ff
}

.zplayer .zplayer-info .zplayer-controller .zplayer-bar-wrap .zplayer-bar .zplayer-played .zplayer-thumb,.zplayer .zplayer-volume-thumb {
    position: absolute;
    top: 0;
    right: 5px;
    margin-top: -4px;
    margin-right: -10px;
    width: 8px;
    height: 8px;
    border: 1px solid #3da0ff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
    cursor: pointer!important
}

.zplayer .zplayer-info .zplayer-controller .zplayer-bar-wrap .zplayer-bar .zplayer-played .zplayer-thumb:hover,.zplayer .zplayer-volume-thumb:hover {
    background: #3da0ff
}

.zplayer .zplayer-info .zplayer-controller .zplayer-time {
    margin-top: 12px;
    color: #999;
    font-size: 12px;
}

.zplayer .zplayer-info .zplayer-controller .zplayer-time .icon {
    margin-left: 12px;
    width: 14px;
    font-size: 14px;
}

.zplayer .zplayer-info .zplayer-controller .zplayer-volume-wrap {
    display: inline-block;
    cursor: pointer!important
}

.zplayer .zplayer-info .zplayer-controller .zplayer-volume-wrap:hover .zplayer-volume-bar-wrap {
    display: block
}

.zplayer .zplayer-info .zplayer-controller .zplayer-volume-wrap .zplayer-volume-bar-wrap {
    position: absolute;
    right: -5px;
    bottom: 17px;
    z-index: 99;
    display: none;
    width: 25px;
    height: 40px
}

.zplayer .zplayer-info .zplayer-controller .zplayer-volume-wrap .zplayer-volume-bar-wrap .zplayer-volume-bar {
    position: absolute;
    right: 10px;
    bottom: 0;
    width: 5px;
    height: 35px;
    background: #aaa
}

.zplayer .zplayer-info .zplayer-controller .zplayer-volume-wrap .zplayer-volume-bar-wrap .zplayer-volume-bar .zplayer-volume {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 5px;
    background: #3da0ff
}

.zplayer .zplayer-menu-bars {
    display: inline-block;
    margin-left: 4px;
}

.zplayer .zplayer-menu-volume {
    float: right;
    display: inline-block
}

.zplayer .zplayer-menu-bars i,.zplayer .zplayer-menu-volume i {
    cursor: pointer;
    color: #666;
}

.zplayer .zplayer-list-btn:hover,.zplayer .zplayer-menu-bars i:hover,.zplayer .zplayer-menu-volume i:hover {
    color: #000
}

.zplayer .zplayer-volume-bar {
    position: relative;
    width: 100%;
    height: 2px;
    background: #cdcdcd;
    cursor: pointer!important
}

.zplayer .zplayer-volume-bar {
    position: relative;
    display: inline-block;
    margin-top: -3px;
    margin-left: 4px;
    width: 40px;
    height: 2px;
    background: #cdcdcd;
    vertical-align: middle;
    cursor: pointer!important;
}

.zplayer .lrc-hide{
	opacity: 0.5;
}

.zplayer-withlrc .zlrc {
    display: block;
}
.zplayer-withlrc .zplayer-pic{
	height: 112px;
	width: 112px;
}
.zplayer-withlrc .zplayer-info{
	height: 112px;
	margin-left: 112px;
}

.zlrc {
    display: none;
    /* position: fixed; */
    /* left: 0; */
    /* bottom: 0; */
    /* width: 100%; */
    /* margin: 5px 20px; */
    background: rgba(255, 255, 255, 0.15);
}

.zplayer-lrc {
    position: relative;
    height: 40px;
    text-align: center;
    overflow: hidden;
    margin: 5px 20px;
}

.zplayer-lrc:after,.zplayer .zplayer-lrc:before {
    position: absolute;
    z-index: 1;
    display: block;
    overflow: hidden;
    content: ' ';
    width: 100%
}

.zplayer-lrc p {
    font-size: 14px;
    color: #666;
    line-height: 20px;
    padding: 0;
    margin: 0;
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
    opacity: .4;
    height: 20px!important;
    overflow: hidden;
}

.zplayer-lrc p.zplayer-lrc-current {
    opacity: 1;
    overflow: visible;
    height: auto!important;
    min-height: 20px;
}

.zplayer-lrc .zplayer-lrc-contents {
    width: 100%;
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out
}


.zplayer-fixed .zplayer{
	transform: translateX(-330px);
}

.zplayer-fixed .zlrc{
	position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}
.zplayer-fixed .zplayer-pic{
	height: 60px;
	width: 60px;
}
.zplayer-fixed .zplayer-info{
	height: 60px;
	margin-left: 60px;
}
.zplayer-fixed .zplayer .zplayer-content{
	border-left: none;
	border-right: none;
	width: 330px;
}

.zplayer-fixed .zplayer-lrc p{
	color: #3da0ff;
}
.zplayer-fixed .zplayer .zplayer-list{
	border-bottom: none;
}


</style>
<style>
        button{
            padding: 0;
            background-color: white;
            box-sizing: border-box;
        }
        .icon-play{
            height: 14.8px;
            border-style: solid;
            border-width: 7.4px 0 7.4px 12px;
            border-color: transparent transparent transparent black;
            transition: all .5s ease;
        }
        .icon-play:hover{
            border-style: double;
            border-width: 0px 0px 0px 12px;
        }
        .icon-pause{
            height: 14.8px;
            border-style: double;
            border-width: 0px 0px 0px 12px;
            border-color: #202020;
        }
    </style>

</body>
<script type="text/javascript">
function zplayer(e) {
    this.isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),
    this.isMobile && (e.autoPlay = !1);
    var a = {
        autoPlay: !1,
        lrcStart: !1,
        showLrc: !1,
        fixed: !1,
        listFolded: !1,
        listMaxHeight: 240
    };
    for (var t in a) {
        a.hasOwnProperty(t) && !e.hasOwnProperty(t) && (e[t] = a[t])
    }
    this.option = e

}
zplayer.prototype.init = function() {
    var p = this, y, cur_m = 0, m="", musicListHtml="",ht="";
    this.element = this.option.element;
    this.musics = this.option.musics;
    for (var i = 0; i < this.musics.length; i++) {
        i == 0 ? musicListHtml += '<li class="playing" index="' + i + '">' + this.musics[i].title + "&nbsp; - &nbsp;" + this.musics[i].author + "</li>" : musicListHtml += '<li index="' + i + '">' + this.musics[i].title + "&nbsp; - &nbsp;" + this.musics[i].author + "</li>"
    }
    ht+= '<div class="zplayer">'
		+'	<div class="zplayer-content">'
		+'		<div class="zplayer-pic">'
		+'			<img src="' + this.musics[0].pic + '">'
		+'		</div>'
		+'		<div class="zplayer-info">'
		+'			<div class="zplayer-music">'
		+'				<span class="zplayer-title">' + this.musics[0].title + '</span>'
		+'				<span class="zplayer-author"> - ' + this.musics[0].author + '</span>'
		+'				<i class="zplayer-list-btn icon icon-reorder">'
		+'				</i>'
		+'			</div>';
	if(!this.option.fixed){
		ht+= this.option.showLrc ? '<div class="zlrc">' : '<div class="zlrc" style="display:none">';
		ht+= '	<div class="zplayer-lrc">'
			+'		<div class="zplayer-lrc-contents" style="transform: translateY(0);">'
			+'		</div>'
			+'	</div>'
			+'</div>';
	}
	ht+= '			<div class="zplayer-controller">'
		+'				<div class="zplayer-bar-wrap">'
		+'					<div class="zplayer-bar">'
		+'						<div class="zplayer-loaded" style="width: 0"></div>'
		+'						<div class="zplayer-played" style="width: 0">'
		+'							<span class="zplayer-thumb"></span>'
		+'						</div>'
		+'					</div>'
		+'				</div>'
		+'				<div class="zplayer-time">'
		+'					<span class="zplayer-ptime">00:00</span>/'
		+'					<span class="zplayer-dtime">00:00</span>'
		+'					<div class="zplayer-menu-bars">'
		//+'						<i class="icon icon-backward"></i>'
		+'						<button class=" icon-play"></button>'
		+'						<button class=" icon-pause display-none"></button>'
		//+'						<i class="icon icon-forward"></i>'
		+'					</div>'
		+'					<div class="zplayer-menu-volume">';
		ht += this.isMobile ? '' : '<i class="volume-icon icon icon-volume-up"></i><div class="zplayer-volume-bar"><div class="zplayer-volume-played" style="width:80%"><span class="zplayer-volume-thumb"></span></div></div>';
		ht += this.option.lrcStart ? (this.option.showLrc ? '<i class="lrc-icon icon icon-list-alt"></i>' : '<i class="lrc-icon icon icon-list-alt lrc-hide"></i>') : '';
		ht +='					</div>'
			+'				</div>'
			+'			</div>'
			+'		</div>'
			+'	</div>';
		ht += this.option.fixed ? '<div class="ss-btn"><i class="icon icon-chevron-left display-none"></i><i class="icon icon-chevron-right"></i></div>' : '';
		ht += this.option.listFolded ? '<ol style="max-height:0px;" class="zplayer-list">' + musicListHtml + '</ol>' : '<ol style="max-height:'+this.option.listMaxHeight+'px;" class="zplayer-list">' + musicListHtml + '</ol>';
		ht += '</div>';
		if(this.option.fixed){
			ht+= this.option.showLrc ? '<div class="zlrc">' : '<div class="zlrc" style="display:none">';
			ht+= '	<div class="zplayer-lrc">'
				+'		<div class="zplayer-lrc-contents" style="transform: translateY(0);">'
				+'		</div>'
				+'	</div>'
				+'</div>';
		}
    this.element.innerHTML=ht;
    if(this.option.fixed){
    	this.element.classList.add("zplayer-fixed");
    }
    if (this.option.lrcStart) {
        this.lrc = l(this.musics[0].lrc);
        if(this.option.showLrc){
        	this.element.classList.add("zplayer-withlrc");
        }
        this.lrcContents = this.element.getElementsByClassName("zplayer-lrc-contents")[0];
        for (d = 0; d < this.lrc.length; d++){
        	m += "<p>" + this.lrc[d][1] + "</p>";
        }
        this.lrcContents.innerHTML = m;
        this.lrcIndex = 0;
        this.lrcContents.getElementsByTagName("p")[0].classList.add("zplayer-lrc-current");
    }

    this.audio = document.createElement("audio");
    this.audio.src = this.musics[0].url;
    this.audio.loop = 0;
    this.audio.preload = "metadata";
    this.audio.volume = 0.8;
    this.audio.addEventListener("durationchange", function() {
        1 !== p.audio.duration && (p.element.getElementsByClassName("zplayer-dtime")[0].innerHTML = p.secondToTime(p.audio.duration))
    }),
    this.audio.addEventListener("loadedmetadata", function() {
        p.loadedTime = setInterval(function() {
            if (p.audio.buffered.length > 0) {
            var e = p.audio.buffered.end(p.audio.buffered.length - 1) / p.audio.duration;
            p.updateBar.call(p, "loaded", e, "width");
            1 === e && clearInterval(p.loadedTime);
            }
        }, 500)
    })
    this.audio.addEventListener("ended", function() {
        cur_m = ((cur_m + 1) == p.musics.length) ? 0 : cur_m + 1;
        playSwitch(cur_m)
    })
    this.audio.addEventListener("error", function() {
        p.element.getElementsByClassName("zplayer-author")[0].innerHTML = " - 加载失败 ╥﹏╥";
        p.element.getElementsByClassName("zplayer-dtime")[0].innerHTML = "00:00";
        p.PauseButton.classList.add("display-none");
        p.PlayButton.classList.remove("display-none")
    })
    this.PlayButton = this.element.getElementsByClassName("icon-play")[0];
    this.PauseButton = this.element.getElementsByClassName("icon-pause")[0];
    this.volumeIcon = this.element.getElementsByClassName("volume-icon")[0];
    this.lrcIcon = this.element.getElementsByClassName("lrc-icon")[0];
    this.hidePlayerButton = this.element.getElementsByClassName("icon-chevron-left")[0];
    this.showPlayerButton = this.element.getElementsByClassName("icon-chevron-right")[0];
    this.musicList = this.element.getElementsByClassName("zplayer-list")[0].getElementsByTagName("li");
    this.playedBar = this.element.getElementsByClassName("zplayer-played")[0];
    this.loadedBar = this.element.getElementsByClassName("zplayer-loaded")[0];
    this.thumb = this.element.getElementsByClassName("zplayer-thumb")[0];
    this.bar = this.element.getElementsByClassName("zplayer-bar")[0];
    this.volumeThumb = this.element.getElementsByClassName("zplayer-volume-thumb")[0];
    this.volumeBar = this.element.getElementsByClassName("zplayer-volume-bar")[0];
    this.volumePlayedBar = this.element.getElementsByClassName("zplayer-volume-played")[0];
    this.listButton = this.element.getElementsByClassName("zplayer-list-btn")[0];
    this.playerList = this.element.getElementsByClassName("zplayer-list")[0];
    
    for (var i = 0; i < this.musicList.length; i++) {
        this.musicList[i].addEventListener("click", function() {
        	cur_m=parseInt(this.getAttribute("index"));
            playSwitch(cur_m);

        })
    }
    this.PlayButton.addEventListener("click", function() {
        p.play.call(p)
    })
    this.PauseButton.addEventListener("click", function() {
        p.pause.call(p)
    })
    if(!this.isMobile){
    	this.volumeIcon.addEventListener("click", function() {
	        p.audio.muted ? (p.audio.muted = !1,
	        p.volumeIcon.className = 0.8 <= p.audio.volume ? "volume-icon icon icon-volume-up" : "volume-icon icon icon-volume-down",
	        p.updateBar.call(p, "volumePlayed", p.audio.volume, "width")) : (p.audio.muted = !0,
	        p.volumeIcon.className = "volume-icon icon icon-volume-off",
	        p.updateBar.call(p, "volumePlayed", 0, "width"))
	    })
    }
    if(this.option.lrcStart){
    	this.lrcIcon.addEventListener("click", function() {
    		this.classList.contains("lrc-hide") ? (p.element.classList.add("zplayer-withlrc"),this.classList.remove("lrc-hide"),p.element.getElementsByClassName("zlrc")[0].style.display="block") : (p.element.classList.remove("zplayer-withlrc"),this.classList.add("lrc-hide"),p.element.getElementsByClassName("zlrc")[0].style.display="none");
	    })
    }
    if(this.option.fixed){
    	this.hidePlayerButton.addEventListener("click", function() {
	        p.element.getElementsByClassName("zplayer")[0].style.transform = "translateX(-330px)";
	        p.hidePlayerButton.classList.add("display-none");
	        p.showPlayerButton.classList.remove("display-none")
	    })
	    this.showPlayerButton.addEventListener("click", function() {
	        p.element.getElementsByClassName("zplayer")[0].style.transform = "translateX(0)";
	        p.showPlayerButton.classList.add("display-none");
	        p.hidePlayerButton.classList.remove("display-none")
	    })
    }

    this.bar.addEventListener("click", function(e) {
        var a = e || window.event;
        y = p.bar.clientWidth;
        var i = (a.clientX - t(p.bar)) / y;
        p.updateBar.call(p, "played", i, "width");
        p.element.getElementsByClassName("zplayer-ptime")[0].innerHTML = p.secondToTime(i * p.audio.duration);
        p.audio.currentTime = parseFloat(p.playedBar.style.width) / 100 * p.audio.duration
    })
    this.thumb.addEventListener("mousedown", function() {
        y = p.bar.clientWidth;
        clearInterval(p.playedTime);
        document.addEventListener("mousemove", e);
        document.addEventListener("mouseup", a)
    })
    if(!this.isMobile){
    	this.volumeThumb.addEventListener("mousedown", function() {
	        y = p.volumeBar.clientWidth;
	        document.addEventListener("mousemove", voe);
	        document.addEventListener("mouseup", voa)
	    })
    }
    if(!this.isMobile){
	    this.volumeBar.addEventListener("click", function(e) {
	        var a = e || window.event;
	        y = p.volumeBar.clientWidth;
	        i = (a.clientX - t(p.volumeBar)) / y;
	        p.volumeIcon.className = 0.8 <= i ? "volume-icon icon icon-volume-up" : (i==0 ? "volume-icon icon icon-volume-off" : "volume-icon icon icon-volume-down")
	        p.audio.volume = i;
	        p.updateBar.call(p, "volumePlayed", i, "width");
	    })
 	};
    this.listButton.addEventListener("click", function(e) {
        (p.playerList.style.maxHeight == "" || p.playerList.style.maxHeight == "0px") ? p.playerList.style.maxHeight = p.option.listMaxHeight+"px" : p.playerList.style.maxHeight = "0px"
    })
    
    
    this.option.autoPlay && this.play();

    function e(e) {
        var a = e || window.event, i = (a.clientX - t(p.bar)) / y;
        i = i > 0 ? i : 0;
        i = 1 > i ? i : 1;
        p.updateBar.call(p, "played", i, "width");
        p.option.lrcStart && p.updateLrc.call(p, parseFloat(p.playedBar.style.width) / 100 * p.audio.duration);
        p.element.getElementsByClassName("zplayer-ptime")[0].innerHTML = p.secondToTime(i * p.audio.duration)
    }
    function a() {
        document.removeEventListener("mouseup", a);
        document.removeEventListener("mousemove", e);
        p.audio.currentTime = parseFloat(p.playedBar.style.width) / 100 * p.audio.duration;
        p.play()
    }
    function t(e) {
        for (var a, t = e.offsetLeft, i = e.offsetParent; null !== i; ) {
            t += i.offsetLeft,
            i = i.offsetParent
        }
        return a = document.body.scrollLeft + document.documentElement.scrollLeft,
        t - a
    }
    function i(e) {
        for (var a, t = e.offsetTop, i = e.offsetParent; null !== i; ) {
            t += i.offsetTop,
            i = i.offsetParent
        }
        return a = document.body.scrollTop + document.documentElement.scrollTop,
        t - a
    }
    function voe(e) {
        var a = e || window.event
          , i = (a.clientX - t(p.volumeBar)) / y;
        i = i > 0 ? i : 0;
        i = 1 > i ? i : 1;
        if(p.audio.muted){
        	p.audio.muted = !1;
        }
        p.audio.volume = i;
        p.updateBar.call(p, "volumePlayed", i, "width");
        if (i >= 0.8) {
            p.volumeIcon.classList.remove("icon-volume-down", "icon-volume-off");
            p.volumeIcon.classList.add("icon-volume-up")
        } else {
            if (i == 0) {
                p.volumeIcon.classList.remove("icon-volume-down", "icon-volume-up");
                p.volumeIcon.classList.add("icon-volume-off")
            } else {
                p.volumeIcon.classList.remove("icon-volume-off", "icon-volume-up");
                p.volumeIcon.classList.add("icon-volume-down")
            }
        }
    }
    function voa() {
        document.removeEventListener("mousemove", voe);
    }
    function l(e) {
        if (e) {
            for (var t = (e = e.replace(/([^\]^\n])\[/g, function(e, t) {
                return t + "\n["
            })).split("\n"), n = [], i = t.length, a = 0; a < i; a++) {
                var r = t[a].match(/\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/g)
                  , o = t[a].replace(/.*\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/g, "").replace(/<(\d{2}):(\d{2})(\.(\d{2,3}))?>/g, "").replace(/^\s+|\s+$/g, "");
                if (r)
                    for (var s = r.length, l = 0; l < s; l++) {
                        var u = /\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/.exec(r[l])
                          , c = 60 * u[1] + parseInt(u[2]) + (u[4] ? parseInt(u[4]) / (2 === (u[4] + "").length ? 100 : 1e3) : 0);
                        n.push([c, o])
                    }
            }
            return (n = n.filter(function(e) {
                return e[1]
            })).sort(function(e, t) {
                return e[0] - t[0]
            }),
            n
        }
        return [[0,"暂无歌词，请您欣赏"]]
    }
    function playSwitch(i) {
        p.PlayButton.classList.add("display-none");
        p.PauseButton.classList.remove("display-none");
        p.element.getElementsByClassName("zplayer-pic")[0].getElementsByTagName("img")[0].src = p.musics[i].pic;
        p.element.getElementsByClassName("zplayer-title")[0].innerHTML = p.musics[i].title;
        p.element.getElementsByClassName("zplayer-author")[0].innerHTML = " - " + p.musics[i].author;
        p.element.getElementsByClassName("zplayer-list")[0].getElementsByClassName("playing")[0].classList.remove("playing");
        p.element.getElementsByClassName("zplayer-list")[0].getElementsByTagName("li")[i].classList.add("playing");
        if (p.option.lrcStart) {
            p.lrcContents.innerHTML = "";
            p.lrcContents.style.transform = "translateY(0px)";
            m = "";
            p.lrc = l(p.musics[i].lrc);
            for (d = 0; d < p.lrc.length; d++) {
                m += "<p>" + p.lrc[d][1] + "</p>";
                p.lrcContents.innerHTML = m;
                p.lrcIndex = 0;
                p.lrcContents.getElementsByTagName("p")[0].classList.add("zplayer-lrc-current");
            }
        }
        clearInterval(p.loadedTime);
        clearInterval(p.playedTime);
        p.audio.src = p.musics[i].url;
        p.audio.play();
        p.playedTime = setInterval(function() {
            p.updateBar.call(p, "played", p.audio.currentTime / p.audio.duration, "width"),
            p.option.lrcStart && p.updateLrc.call(p),
            p.element.getElementsByClassName("zplayer-ptime")[0].innerHTML = p.secondToTime(p.audio.currentTime)
        }, 100)
    }
}
zplayer.prototype.play = function() {
    this.PlayButton.classList.add("display-none");
    this.PauseButton.classList.remove("display-none");
    this.audio.play();
    var e = this;
    this.playedTime = setInterval(function() {
        e.updateBar.call(e, "played", e.audio.currentTime / e.audio.duration, "width");
        e.option.lrcStart && e.updateLrc.call(e),
        e.element.getElementsByClassName("zplayer-ptime")[0].innerHTML = e.secondToTime(e.audio.currentTime)
    }, 100)
}
zplayer.prototype.pause = function() {
    this.PauseButton.classList.add("display-none");
    this.PlayButton.classList.remove("display-none");
    this.audio.pause();
    clearInterval(this.playedTime)
}
zplayer.prototype.updateBar = function(e, a, t) {
    a = a > 0 ? a : 0,
    a = 1 > a ? a : 1,
    this[e + "Bar"].style[t] = 100 * a + "%"
}
zplayer.prototype.updateLrc = function(e) {
    if (e || (e = this.audio.currentTime),
    e < this.lrc[this.lrcIndex][0] || ( this.lrcIndex == this.lrc.length-1 ? false : e >= this.lrc[this.lrcIndex + 1][0] ) )
        for (var a = 0; a < this.lrc.length; a++)
            e >= this.lrc[a][0] && (!this.lrc[a + 1] || e < this.lrc[a + 1][0]) && (this.lrcIndex = a,
            this.lrcContents.style.transform = "translateY(" + 20 * -this.lrcIndex + "px)",
            this.lrcContents.getElementsByClassName("zplayer-lrc-current")[0].classList.remove("zplayer-lrc-current"),
            this.lrcContents.getElementsByTagName("p")[a].classList.add("zplayer-lrc-current"))
}
zplayer.prototype.secondToTime = function(e) {
    var a = function(e) {
        return 10 > e ? "0" + e : "" + e
    }
      , t = parseInt(e / 60)
      , i = parseInt(e - 60 * t);
    return a(t) + ":" + a(i)
}
function onRestoreData(data){
    zp1.audio.currentTime = parseFloat(data);
    return zp1.audio.currentTime;
}
function onSavaData(){
    return zp1.audio.currentTime;
    //return cnt;
}

</script>
<script>
		 	var zp1 = new zplayer({
		        element: document.getElementById("player1"),
		        musics: [{
	                title: "二人三角",
	                author: "阿良良木健",
	                url: "https://music.163.com/song/media/outer/url?id=562594322.mp3",
	                pic: "https://p1.music.126.net/LMPuItVrjn1Vi5c8vZZ90Q==/109951163309729098.jpg?param=300x300"
	            }]

		    })
		    zp1.init();

			// var zp2 = new zplayer({
		    //     element: document.getElementById("player2"),
		    //     lrcStart: 1,/*是否开启歌词功能 ，默认false（为true时musics集合中需要传入lrc字段。）*/
		    //     musics: [{
	        //         title: "暧昧",
	        //         author: "薛之谦",
	        //         url: "http://music.163.com/song/media/outer/url?id=471385043.mp3",1.mp3
	        //         pic: "http://p1.music.126.net/fNbj5uDwltSDLbETdnEYYQ==/109951163069265719.jpg?param=300x300",
	        //         lrc: "[00:00.00] 作曲 : 薛之谦[00:01.00] 作词 : 薛之谦[00:14.800]反正现在的感情 都暧昧[00:20.130]你大可不必为难 找般配[00:24.820]付出过的人排队 谈体会[00:29.290]趁年轻别害怕一个人睡[00:34.170]可能是现在感情 太昂贵[00:39.080]让付出真心的人 好狼狈[00:43.950]还不如听首情歌 的机会 忘了谁[00:54.880]感情像牛奶一杯 越甜越让人生畏[01:04.320]都早有些防备 润色前的原味[01:13.350]所以人们都拿起咖啡 把试探放在两人位[01:23.860]距离感一对 就不必再赤裸相对[01:31.820]反正现在的感情 都暧昧[01:36.590]你大可不必为难 找般配[01:41.500]付出过的人排队 谈体会[01:46.150]弃之可惜 食而无味[01:51.080]可能是现在感情 太珍贵[01:55.630]让付出真心的人 好疲惫[02:00.600]谁不曾用过卑微的词汇 想留住谁[02:49.110]还贪恋着衣衫昂贵 却输给了廉价香水[02:59.080]他先诱你入位 还刻意放低了分贝[03:08.310]可感情越爱越妩媚 像烂掉的苹果一堆[03:17.980]连基因都不对 还在意什么鱼腥味[03:27.020]反正现在的感情 都暧昧[03:31.720]你大可不必为难 找般配[03:36.500]何必给自己沉迷 的机会[03:41.280]不如用误会来结尾[03:46.320]反正现在的我们 算暧昧[03:50.570]我愿意给的感情 请浪费[03:55.740]反正流过的眼泪 难收回[04:00.310]就别再安慰[04:05.450]看你入眠的侧脸 有多美[04:10.820]和你丢下的一切 好匹配[04:16.870]我还以为我能 多狼狈[04:23.090]我自以为[04:29.150]制作人：郑伟[04:30.160]编曲：薛之谦 郑伟[04:31.190]混音：郑伟[04:31.940]大提琴：周润青[04:32.730]女声：孟楠[04:33.430]合音：薛之谦 张石狄[04:34.190]录音：莫家伟[04:34.930]母带：Chris Gehringer"
	        //     },{
	        //         ,{
	        //        title: "白石溪",
	        //        author: "洛天依",
	        //        url: "2.mp3",
	        //        pic: "pic.jpg"
	        //    },{
	        //    	title: "灰烬",
	        //        author: "言和",
	        //        url: "3.mp3",
	        //        pic: "pic.jpg"
	        //    },{
	        //         title: "That Girl",
	        //         author: "Olly Murs",
	        //         url: "http://music.163.com/song/media/outer/url?id=440208476.mp3",
	        //         pic: "http://p1.music.126.net/_dPhSlbDz23MjXUEYeBGRw==/18820340533734696.jpg?param=300x300",
	        //         lrc: "[by:刺客辣条之法与鲨][00:00.00]There's a girl but I let her get away[00:05.40]It's all my fault cause pride got in the way[00:11.40]And I'd be lying if I said I was ok[00:16.00]About that girl the one I let get away[00:21.00]I keep saying no[00:23.00]This can't be the way we're supposed to be[00:26.00]I keep saying no[00:29.00]There's gotta be a way to get you close to me[00:31.00]Now I know you gotta[00:33.490]Speak up if you want somebody[00:36.490]Can't let him get away, oh no[00:38.490]You don't wanna end up sorry[00:41.490]The way that I'm feeling everyday[00:43.490](Don't you know)[00:44.00]No no no no[00:46.490]There's no home for the broken heart[00:50.490](Don't you know)[00:50.00]No no no no[00:52.490]There's no home for the broken[00:53.490]There's a girl but I let her get away[00:59.490]It's my fault cause I said I needed space[01:04.490]I've been torturing myself night and day[01:10.490]About that girl, the one I let get away[01:15.490]I keep saying no[01:17.490]This can't be the way it was supposed to be[01:20.490]I keep saying no[01:23.490]There's gotta be a way to get you[01:24.490]There's gotta be a way to get you[01:25.490]Close to me[00:26.490]You gotta[01:27.490]Speak up if you want somebody[01:30.490]Can't let him get away, oh no[01:32.490]You don't wanna end up sorry[01:35.490]The way that I'm feeling everyday[01:37.490](Don't you know)[01:38.490]No no no no[01:40.490]There's no home for the broken heart[01:42.490](Don't you know)[01:43.490]No no no no[01:45.490]There's no home for the broken[01:48.490]No home for me[01:51.490]No home cause I'm broken[01:53.490]No room to breathe[01:55.490]And I got no one to bla-ame[01:59.490]No home for me[02:02.490]No home cause I'm broken[02:03.490]About that girl[02:05.490]The one I let get away[02:09.490]So you better[02:10.490]Speak up if you want somebody[02:13.490]You can't let him get away oh no[02:16.490]You dont wanna end up sorry[02:18.490]The way that I'm feeling everyday[02:20.490](Don't you know)[02:21.490]No no no no[02:23.490]There's no home for the broken heart[02:26.00](Don't you know)[02:26.490]No no no no[02:29.00]There's no home for the broken[02:31.490]Oh[02:32.490]You don't wanna lose at love[02:34.490]It's only gonna hurt too much[02:37.00]I'm telling you[02:37.490]You don't wanna lose at love[02:40.00]It's only gonna hurt too much[02:42.490]I'm telling you[02:43.490]You don't wanna lose at love[02:45.490]Cause There's no home for the broken heart[02:47.490]About that girl[02:49.490]The one I let get away"
	        //     },{
	        //         title: "云烟成雨",
	        //         author: "房东的猫",
	        //         url: "http://music.163.com/song/media/outer/url?id=513360721.mp3",
	        //         pic: "http://p1.music.126.net/DSTg1dR7yKsyGq4IK3NL8A==/109951163046050093.jpg?param=300x300",
	        //         lrc: "[00:00] 作曲 : 少年佩\n[00:01] 作词 : 墨鱼丝\n[00:11]制作人：黎偌天\n[00:12]编曲：黎偌天\n[00:13]监制：李纤橙\n[00:14]\n[00:18]你的晚安 是下意识的恻隐\n[00:24]我留至夜深 治疗失眠梦呓\n[00:30]那封手写信 留在行李箱底\n[00:36]来不及 赋予它旅途的意义\n[00:43]若一切 都已云烟成雨\n[00:49]我能否 变成淤泥\n[00:52]再一次 沾染你\n[00:55]若生命 如过场电影\n[01:01]Oh让我再一次 甜梦里惊醒\n[01:13]我多想再见你\n[01:15]哪怕匆匆一眼就别离\n[01:19]路灯下昏黄的剪影\n[01:22]越走越漫长的林径\n[01:25]我多想再见你\n[01:28]至少玩笑话还能说起\n[01:32]街巷初次落叶的秋分\n[01:35]渐行渐远去的我们\n[01:53]若一切 都已云烟成雨\n[01:59]我能否 变成淤泥\n[02:01]再一次 沾染你\n[02:05]若生命 如过场电影\n[02:10]Oh让我再一次 甜梦里惊醒\n[02:19]我多想再见你\n[02:21]哪怕匆匆一眼就别离\n[02:26]路灯下昏黄的剪影\n[02:28]越走越漫长的林径\n[02:32]我多想再见你\n[02:34]至少玩笑话还能说起\n[02:38]街巷初次落叶的秋分\n[02:41]渐行渐远去的我们\n[02:49]站台 汽笛响起\n[02:52]想念是你的声音\n[02:55]我们提着过去 走入人群\n[03:02]寻找着一个位置 安放自己\n[03:13]我多想再见你\n[03:15]哪怕匆匆一眼就别离\n[03:19]路灯下昏黄的剪影\n[03:22]越走越漫长的林径\n[03:25]我多想再见你\n[03:28]至少玩笑话还能说起\n[03:31]街巷初次落叶的秋分\n[03:35]渐行渐远去的我们\n[03:41]\n[03:43]主唱：红鼻子小黑\n[03:44]制作人：黎偌天\n[03:46]监制：李纤橙\n"
	        //     },{
	        //         title: "给陌生的你听 ",
	        //         author: "G.G(张思源)",
	        //         url: "http://music.163.com/song/media/outer/url?id=562594322.mp3",
	        //         pic: "http://p1.music.126.net/LMPuItVrjn1Vi5c8vZZ90Q==/109951163309729098.jpg?param=300x300",
	        //         lrc: "[00:00.00] 作曲 : G.G(张思源）[00:01.00] 作词 : G.G(张思源）[00:05.12]编曲：刘羽晟[00:21.02]这首歌写给你听[00:22.64]我想请你闭上眼睛[00:25.28]这首可能不太动听[00:27.71]但是我有足够的用心[00:30.80]这首歌写给你听[00:33.17]我想请你闭上眼睛[00:35.76]这首可能不太动听[00:38.29]但是我有足够的用心[00:41.06]OK 你我可能还没见过[00:43.49]那就先让这首把未曾听闻给打破[00:46.19]说实话我也没有什么十足的把握[00:48.86]能让你动心再次播放这首歌[00:51.65]我只是每天独自在家不知跟谁说说话[00:54.54]所以决定问问陌生的你过得还好吗[00:57.15]你还在上学读书或是毕业工作了[00:59.86]会不会跟我一样在外偶尔想想家[01:02.62]想问你今天早餐吃了没[01:04.82]会不会好吃的让我馋嘴流口水[01:07.12]你有没有养小猫小狗在你家里住[01:09.64]尽管让人头疼却又把你给守护[01:12.23]春天的风 微微的吹[01:15.33]吹过你的美[01:17.73]春天的风 微微的吹[01:20.58]我想这首能作陪[01:23.60]这首歌写给你听[01:25.71]我想请你闭上眼睛[01:28.40]这首可能不太动听[01:30.80]但是我有足够的用心[01:33.54]这首歌写给你听[01:35.94]我想请你闭上眼睛[01:38.62]这首可能不太动听[01:41.25]但是我有足够的用心[01:43.91]对了 你是什么星座[01:46.38]你最喜欢的颜色是彩虹里的哪个[01:48.76]你有没有在夜晚见过有流星划落[01:51.48]想问问你许下最傻的愿望是什么[01:54.11]突然好奇的想 我路过了街道[01:57.46]正好这首在你耳朵里播报[02:00.04]你认不得我 你在听我不知道[02:02.64]但这种缘分真的好好好奇妙[02:05.64]想一想 都觉得奇妙[02:07.82]想一想 该如何问好[02:10.72]尽管陌生  有你真好[02:13.22]我想你知道 我想你知道[02:15.91]想一想 都觉得奇妙[02:18.44]想一想 该如何问好[02:21.19]尽管陌生  有你真好[02:23.62]我想你知道 我想你知道[02:26.28]这首歌写给你听[02:28.08]我想请你闭上眼睛[02:30.71]这首可能不太动听[02:33.32]但是我有足够的用心[02:36.14]这首歌写给你听[02:38.67]我想请你闭上眼睛[02:41.51]这首可能不太动听[02:43.85]但是...[02:47.23]这首歌写给你听[02:49.48]我想请你闭上眼睛[02:51.67]这首可能不太动听[02:54.18]但是我有足够的用心[02:56.98]这首歌写给你听[02:59.87]我想请你闭上眼睛[03:02.59]这首可能不太动听[03:05.38]但是我有足够的用心[03:09.45]混音：王路遥"
	        //     }]
		    // })
		    // zp2.init();
		</script>
</html>
